<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p3_CSS常用值</title>
  <style>
      h1 {
          color: red;
          /* rgb 表示法*/
          color: rgb(255,0,0);
          color: rgb(0,255,255);
          color: rgb(0,255,0);
          color: rgb(255,0,255);
          color: rgb(0,0,255);
          color: rgb(255,255,0);
          color: rgb(128,128,128);
          color: rgb(0,0,0);
          color: rgb(255,255,255);
          /* 16进制表示法 #rrggbb,每个位置取值范围【00-ff】*/
          color: #ff0000;
          color: #00ff00;
          color: #0000ff;
          color: #000000;
          color: #ffffff;
          color: #808080;
          /* 16进制表示法简写 #rgb*/
          color: #f00;
          color: #0f0;
          color: #00f;
          color: #000;
          color: #fff;
          color: #808080;
          /* rgba 表示法 （red ,green,blue,alpha),alpha 不透明度，取值范围【0-1】*/
          color: rgba(255,0,0,1);
          color: rgba(255,0,0,0.8);
          color: rgba(255,0,0,0.6);
          color: rgba(255,0,0,0.3);
          color: rgba(255,0,0,.1);
          color: rgba(255,0,0,0);
          color: rgba(255,0,0,1);
      }
      .d1 {
          /* 注意; 插入背景图必须设置所在区域的大小*/
          width: 50px;
          height: 100px;
          /* 插入背景图片*/
          background-image: url(img/mr.png);
          /* 设置背景图片的大小 ：宽度 高度*/
          background-size: 50px,100px;
          /* 可以同时设置背景色,没有图的地方显示背景色 */
          background-color: black;
      }
      .d2 {
          border:  5px solid red;
          width: 500px;
          height: 300px;
          background-image: url(img/mr.png);
          /* 设置背景图不重复 */
          background-repeat: no-repeat;
          background-position: 0 0;/* 默认位置在左上角 原点*/
          background-position: -50px 0;/* 向左边移动50px*/
          background-position: 0 50px;/* 向下移动50px*/
          background-position: -50px -50px;/* 向左上角移动50px*/
          background-position: 50% 50%;/*  剩余空间的百分比*/
          background-position: 100% 100%;/* 右下角*/
          background-position: left top;/* 左下角*/
          background-position: right bottom;/* 右下*/
          background-position: center center;/* 居中*/
          background-position: center;/* 居中简写 */

          /*background-size: 50px,100px;
          background-color: black;*/
      }
      .d3 {
          width: 500px;
          height: 300px;
          background-image: linear-gradient(30deg,red,orange,yellow);
      }
  </style>
</head>
<body>
    <h1>测试颜色</h1>
    <!--.d*3 Tab 补全-->
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>

</body>
</html>